package com.example.basic_components.Button

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Share
import androidx.compose.material.icons.outlined.Favorite
import androidx.compose.material.icons.outlined.Share
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout

@Composable
fun IconButtonDemo() {

    var tintState = remember { mutableStateOf(false) }

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Card(
            modifier = Modifier
                .width(300.dp)
                .height(500.dp),
            elevation = 15.dp,
            shape = RoundedCornerShape(15.dp),
        ) {
            Column {
                Box(
                    modifier = Modifier
                        .width(300.dp)
                        .background(color = Color.LightGray)
                        .weight(2f),
                    contentAlignment = Alignment.Center,
                ) {
                    Text(
                        text = "一言",
                        fontSize = 45.sp
                    )

                }
                Divider(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(1.dp)
                )
                Box(
                    modifier = Modifier
                        .width(300.dp)
                        .weight(3f),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = "Jetpack Compose",
                        fontSize = 25.sp,
                        fontStyle = FontStyle.Italic,
                    )
                }
                Box(
                    modifier = Modifier
                        .width(300.dp)
                        .weight(1f)
                ) {
                    Row(
                        verticalAlignment = Alignment.Bottom,
                        horizontalArrangement = Arrangement.End,
                        modifier = Modifier.fillMaxSize()
                    ) {
                        IconButton(
                            onClick = { tintState.value = !tintState.value}
                        ) {
                            Icon(
                                Icons.Outlined.Favorite,
                                contentDescription = null,
                                tint = if (tintState.value) Color.Red else Color.Gray
                            )
                        }
                        IconButton(
                            onClick = { /*TODO*/ }
                        ) {
                            Icon(
                                Icons.Outlined.Share,
                                contentDescription = null
                            )
                        }
                    }
                }
            }
        }
    }
}

@Preview
@Composable
fun IconButtonDemoPre() {
    IconButtonDemo()
}